<template>
    <div class="mainBox">
        <PageHeaderNav
            :need-underline="false"
            :need-back="true"
            content="个人中心"
            back-router="/searchView/"
        />
        <div class="content">
            <div class="aui-chang-list">
                <div class="aui-user-img">
                    <router-link to="/modifyPersonalInformation">
                        <img :src="showHeadSculpture" alt="">
                    </router-link>
                </div>
                <div class="aui-user-text">
                    <div class="bindCode" v-if="$store.state.UserModule.userInfo.bindCode">
                        <span>监护码：{{ $store.state.UserModule.userInfo.bindCode }}</span>
                        <span class="updateBindCode btnFocus" @click="updateBindCode">更新</span>
                    </div>
                    <div class="aui-user-text-img">
                        <img src="@/assets/images/userView/identify.png" alt="">
                        <h1 style="max-width: 50%;overflow: hidden;text-overflow: ellipsis">{{ showUsername }}</h1>
                    </div>
                    <button class="btnFocus" v-if="!$store.state.UserModule.userInfo.isLogin"
                            @click="$router.push('/loginView/')">
                        立即登录
                    </button>
                    <button class="btnFocus" v-else @click="outLogin">退出登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PageHeaderNav from "@/components/Publlic/PageHeaderNav.vue";
import serverConf from "@/utils/js/public/serverConf";

export default {
    components: {
        PageHeaderNav
    },

    data() {
        return {}
    },

    methods: {
        outLogin() {
            this.$dialog.confirm({
                title: '提示',
                message: '确认退出吗？',
                overlay: false
            }).then(() => {
                localStorage.clear()
                location.reload()
            })
        },

        updateBindCode() {
            this.request.post("/user/updateBindCode/", {}).then((response) => {
                const status = response["code"] === 200

                if (status) {
                    // 回写数据
                    this.$store.state.UserModule.userInfo.bindCode = response["data"]["bindCode"]
                }
            })
        }
    },

    computed: {
        // 自定义显示姓名
        showUsername() {
            const username = this.$store.state.UserModule.userInfo.username
            return username ? username : "未登录"
        },

        // 自定义显示头像
        showHeadSculpture() {
            let headSculptureUrl = this.$store.state.UserModule.userInfo.headSculptureUrl
            return headSculptureUrl ? headSculptureUrl : require("@/assets/images/userView/default.png")
        },
    },

    created() {
        this.request.post("/user/getUserInfo/", {}).then((response) => {
            const status = response["code"] === 200

            if (status) {
                // 回写数据
                let headSculptureUrl = response["data"]["userInfo"].headSculptureUrl
                if (serverConf.DEBUG) response["data"]["userInfo"].headSculptureUrl = serverConf.SERVER_URL + headSculptureUrl
                this.$store.state.UserModule.userInfo = response["data"]["userInfo"]
            }
        })
    }
}
</script>

<style lang="less" scoped>
.mainBox {
    width: 100%;
    height: 100%;
}

.content {
    width: 100%;
    height: calc(100% - 65px);
    background-color: var(--color);
    padding-top: 20vh;
}

.aui-chang-list {
    width: 90%;
    background: #fff;
    box-shadow: 0 3px 15px #e7e7e7;
    position: relative;
    padding-bottom: 3rem;
    border-radius: 15px;
    margin: auto;
}

.aui-user-text-img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.4rem 0;
}

.aui-user-text-img img {
    width: 70px;
    display: inline;
    vertical-align: center;
    margin-right: 5px;
    animation: identifyImg 2.8s infinite ease-in-out;
}

@keyframes identifyImg {
    0% {
        transform: rotate(8deg);
    }
    50% {
        transform: rotate(-8deg);
    }
    100% {
        transform: rotate(8deg);
    }
}

.aui-user-img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: -2.5rem;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 3px 9px #e7e7e7;
    z-index: 10000;
    margin: auto;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aui-user-img img {
    width: 100%;
}

.aui-user-text {
    padding: 3rem 0 0;
    text-align: center;
    position: relative;
    z-index: 3;
    top: 1.8rem;
}

.aui-user-text > span {
    width: 42%;
    margin: 0 auto 0.8rem;
    display: block;
    font-size: 1.1rem;
}

.aui-user-text h1 {
    color: #333;
    font-size: 1.8rem;
}

.aui-user-text span i {
    margin-top: -2px;
}

.aui-user-text button {
    background-color: var(--color);
    font-size: 1.2rem;
    font-weight: normal;
    color: white;
    border-radius: 22px;
    padding: 0.5rem 1.1rem;
    border: none;
    cursor: pointer;
}

.bindCode {
    color: var(--color);
    display: flex;
    justify-content: center;
    align-items: center;

    .updateBindCode {
        box-sizing: border-box;
        margin-left: 8px;
        font-size: 0.5rem;
        padding: 2px 6px;
        background-color: var(--color);
        color: white;
        border-radius: 6px;
    }
}
</style>